/*
 * @Title: 景区神器
 * @Created by: ycq
 */
<template>
	<view>
		
		<IndexHead :config='pageConfig'></IndexHead>
		<!-- #ifdef MP-WEIXIN -->
			<view class="map" :style="{height:mapHeight+55+'px'}">
		<!-- #endif -->
		<!-- #ifndef  MP-WEIXIN -->
			<view class="map" >
		<!-- #endif -->
		<!-- <view class="map" :style="{height:mapHeight+'px'}"> -->
			<movable-area style="width: 100%;height: 100%;" >
                <movable-view :x="x" :y="y" @change="onChange" @click="showSpot=false;showLineBox=false" style="width: 1400upx;height: 1400upx;"  class="max" direction="all">
					<!-- text -->
					<image src="/static/map/map.jpg"  mode=""></image>
					<view class="points">
						<!-- 我的位置 -->
						<image class="myPos" src="/static/map/myPos.png" :style="{left:myPos.x+'upx',top:myPos.y+'upx'}" mode=""></image>
						
						<!-- 卫生间 -->
						<view class="points-area" v-if="showAll||pointId==item.id"  v-for="(item,index) in posData" :key="index" >
							<view class="points-item" v-for="(posItem,innerIndex) in item.pos" :key="innerIndex" :style="{left:posItem.x+'upx',top:posItem.y+'upx'}">
								<view 
								v-if="!showAll&&innerIndex==0&&popType!=4&&popType!=5"
								:class="{
									'tip-bottom':posItem.y<50&&innerIndex!=0,
									'tip-top':posItem.y>49&&innerIndex!=0,
									'point-tip-near':innerIndex==0,
									'point-tip':innerIndex!=0,
									'near-bottom':posItem.y<100&&innerIndex==0,
									'near-top':posItem.y>99&&innerIndex==0,
								}">
									<image class="pop-img" v-if="item.id==3"  src="/static/map/wcjian2.png" mode=""></image>
									<image class="pop-img" v-if="item.id==5"   src="/static/map/zhusuroom2.png" mode=""></image>
									<image class="pop-img"  v-if="item.id==6"  src="/static/map/youkecenter2.png" mode=""></image>
									<image class="pop-img"  v-if="item.id==4"  src="/static/map/cooking2.png" mode=""></image>
									<image class="pop-img"  v-if="item.id==7"  src="/static/map/safetyexit2.png" mode=""></image>
									<image class="pop-img" v-if="item.id==8"   src="/static/map/P2.png" mode=""></image>
									<image class="pop-img" v-if="item.id==9"   src="/static/map/shopline2.png" mode=""></image>
									<view>
										<text class="pop-title">{{item.name}}</text>
										<view>
											<text class="pop-checking">正在维修中</text>
											<text class="near-text" v-if="innerIndex==0">离我最近</text>
										</view>
									</view>
									<view class="pop-btn">立即导航</view>
									<!-- <text>距离400m</text> -->
									<!-- <view class="nearWC">
										<image src="../../../../static/map/wcjian2.png" mode=""></image>
										<view style="font-size: 28upx;margin-left: 93upx;margin-top: 40upx;">卫生间</view>
										<view class="wctype">
											<text style="color: rgba(235,61,20,1.00);font-size: 20upx;">正在维修中</text>
											<text style="color: rgba(88,179,255,1.00);font-size: 20upx;">离我最近</text>
										</view>
										<view class="btn">立即导航</view>
									</view> -->
									<view :class="posItem.y<50?'sanjiao-bottom':'sanjiao'"></view>
								</view>
								<view class="spot-area" v-if="!showAll&&innerIndex==0&&(popType==4||popType==5)" style="top:-240upx;left:-200upx">
									<image class="spot-area-close" @click.stop="clearPops" src="/static/close-bg.png" mode=""></image>
									<image class="spot-area-headIcon" src="/static/banner.png" mode=""></image>
									<view class="spot-right">
										<text class="spot-name">热气球</text>
										<text class="spot-det" v-if="!openSearch" @click="openDetail">详情</text>
										<image class="spot-det-image" v-if="!openSearch"  @click="openDetail" src="/static/jiantou.png" mode=""></image>
										<view class="spot-recommend" v-if="popType!=5&&popType!=4">清新观景台，在清新大道中轴线北端...</view>
										<view class="spot-recommend" v-if="popType==5||popType==4">据您100米</view>
										<text class="line" v-if="popType!=1&&popType!=5&&popType!=4">当前排队人数：20 人</text>
										
										<text class="line" v-if="popType!=1&&popType!=5&&popType!=4">预计等待时间：20分钟</text>
										<text class="line2" v-if="popType!=1&&popType!=5&&popType!=4">人数较多，建议稍后游览</text>
										<view class="spot-btns">
											<view class="spot-btn" @click="showLine()">立即导航</view>
											<view class="spot-btn1" v-if="popType!=1&&popType!=5&&popType!=4" @click="openQueue()">立即排队</view>
											<view class="spot-btn" v-if="false" @click="showLine()">忽略此点</view>
											<view class="spot-btn1" v-if="false" @click="openQueue()">取消途经点</view>
											<view class="spot-btn" v-if="false" @click="showLine()">重新添加</view>
											<view class="spot-btn1" v-if="false" @click="openQueue()">设为途经点</view>
										</view>
									</view>
									<view class="sanjiao" style="margin-left: 250upx;"></view>
								</view>
								<image :src="innerIndex==0?item.imgN:item.img"  ></image>
							</view>
						</view>
					</view>
					<view class="spot-btn-area"   >
						<!-- <view style="position: absolute;width: 1400upx;height: 1400upx;" @click="showSpot=false;showLineBox=false"></view> -->
						<view @click.stop="spotClick(index)" v-for="(item,index) in spotPos" :key='index' :style="{top:item.top+'upx',left:item.left+'upx'}" style="width: 200upx;height: 200upx;position: absolute;">
							<image class="lv-point" src="/static/map/lvpoint.png" v-if="!showLinePointBox||!item.choose" style="width: 80upx;height: 90upx;position: absolute;left:60upx;" mode=""></image>
							<image class="lv-point" src="/static/map/lvpoint2.png" v-if="showLinePointBox&&item.choose" style="width: 80upx;height: 90upx;position: absolute;left:60upx;" mode=""></image>
							
							<!--  v-if="showSpot" 默认先显示-->
							<view class="spot-area" v-if="showSpot&&spotIndex==index" :style="{top:(bottomIndex==2?'-240upx':'')}">
								<image class="spot-area-close" @click.stop="clearPops" src="/static/close-bg.png" mode=""></image>
								<image class="spot-area-headIcon" src="/static/banner.png" mode=""></image>
								<view class="spot-right">
									<text class="spot-name">{{item.name}}</text>
									<text class="spot-det" v-if="!openSearch&&!openSearchS" @click="openDetail">详情</text>
									<image class="spot-det-image" v-if="!openSearch&&!openSearchS"  @click="openDetail" src="/static/jiantou.png" mode=""></image>
									<view class="spot-recommend">清新观景台，在清新大道中轴线北端...</view>
									<text class="line" v-if="bottomIndex!=2">当前排队人数：20 人</text>
									<text class="line" v-if="bottomIndex!=2">预计等待时间：20分钟</text>
									<text class="line2" v-if="bottomIndex!=2">人数较多，建议稍后游览</text>
									<view class="spot-btns">
										<view class="spot-btn" v-if="!showLinePointBox" @click="showLine()">立即导航</view>
										<view class="spot-btn1" v-if="bottomIndex!=2&&!showLinePointBox" @click="openQueue()">立即排队</view>
										<view class="spot-btn" v-if="false" @click="showLine()">忽略此点</view>
										<view class="spot-btn1" v-if="showLinePointBox&&item.choose" @click="minusLine(item)">取消途经点</view>
										<view class="spot-btn1" v-if="showLinePointBox&&!item.choose" @click="addLine(item)">设为途经点</view>
										<view class="spot-btn" v-if="showLinePointBox" @click="showLine()">重新添加</view>
										
									</view>
								</view>
								<view class="sanjiao" style="margin-left: 250upx;"></view>
							</view>
							<view class="way-box" v-if="showLineBox&&showSpot">
								<view class="way-box-head">
									<!-- <view class="close-img">
										<image src="/static/close.png" @click="closeLineBox()" mode=""></image>
									</view> -->
									<view class="way-item">
										<view class="way-btn">推荐路线</view>
										<text class="way-des">最热门的旅游路线</text>
										<image class="way-line-img" src="/static/airplane.png" mode=""></image>
									</view>
									<view class="way-item">
										<view class="way-btn">最快路线</view>
										<text class="way-des">最快的旅游路线</text>
										<image class="way-line-img" src="/static/airplane.png" mode=""></image>
									</view>
									<view class="way-item">
										<view class="way-btn" @click="openZyMask">自由路线</view>
										<text class="way-des">去您想去的景点</text>
										<image class="way-line-img" src="/static/airplane.png" mode=""></image>
									</view>
								</view>
								<view class="sanjiao-bottom" style="margin-left: 250upx;"></view>
							</view>
						</view>
					</view>
					
				</movable-view>
            </movable-area>
		</view>
		<view class="way-box-2" v-if="showLineBox2">
			<view class="way-box-head">
				<!-- <view class="close-img">
					<image src="/static/close.png" @click="closeLine()" mode=""></image>
				</view> -->
				<view class="way-item">
					<view class="way-btn">推荐路线</view>
					<text class="way-des">最热门的旅游路线</text>
					<image class="way-line-img" src="/static/airplane.png" mode=""></image>
				</view>
				<view class="way-item">
					<view class="way-btn">最快路线</view>
					<text class="way-des">最快的旅游路线</text>
					<image class="way-line-img" src="/static/airplane.png" mode=""></image>
				</view>
				<view class="way-item">
					<view class="way-btn" @click="openZyMask">自由路线</view>
					<text class="way-des">去您想去的景点</text>
					<image class="way-line-img" src="/static/airplane.png" mode=""></image>
				</view>
			</view>
			<view class="sanjiao" style="margin-left: 250upx;"></view>
		</view>
		<SpotQueue v-if='showQueue'/>
		<SpotQueueSucc v-if='showQueueSucc' />
		<ShenqiDetail v-if='showDetail'></ShenqiDetail>
		<JingquDetail v-if='showJQDetail'></JingquDetail>
		<SearchSpot v-if='openSearch'></SearchSpot>
		<SearchScenery v-if='openSearchS'></SearchScenery>
		<SearchOnline v-if='openSearchO'></SearchOnline>
		<SearchAudio v-if='openSearchA'></SearchAudio>
		<realName v-if='openrealN'></realName>
		<SearchHotel v-if='openSearchH'></SearchHotel>
		<SearchFood v-if='openSearchF'></SearchFood>
		<ShenqiMask v-if='showZylxMask' />
		<MapMsg v-if='showMsg'></MapMsg>
		<LinePointBox v-if='showLinePointBox' :config='lineConfig'></LinePointBox>
		<SpotBottom />
	</view>
</template>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=ea178a2269d1f7d38ece2d4efffc65a3"></script>
<script>
	import SpotBottom from '@/components/SpotBottom.vue'
	import TMap from '@/components/map.vue'
	import ShenqiMask from '@/components/shenqiMask.vue'
	import SearchSpot from '@/components/SearchSpot.vue'
	import SearchScenery from '@/components/SearchScenery.vue'
	import SearchOnline from '@/components/SearchOnline.vue'
	import SearchAudio from '@/components/SearchAudio.vue'
	import realName from '@/components/realName.vue'
	import SearchHotel from '@/components/SearchHotel.vue'
	import SearchFood from '@/components/SearchFood.vue'
	import ShenqiDetail from '@/components/ShenqiDetail.vue'
	import JingquDetail from '@/components/jingquDetail.vue'
	import TouristCenter from '@/components/TouristCenter.vue'
	import SpotQueue from "@/components/SpotQueue.vue"
	import SpotQueueSucc from '@/components/SpotQueueSucc.vue'
	import MapMsg from "@/components/MapMsg.vue"
	import LinePointBox from "@/components/MapLinePointBox.vue"
	 export default{
		 data(){
			 return{
				showSpot:false,
				showQueue:false,
				showZylxMask:false,
				showLineBox:false,
				openSearch:false,
				openSearchH:false,
				showMsg:true,
				showLinePointBox:false,
				openrealN:false,
				openSearchS:false,
				openSearchO:false,
				bottomIndex:0,
				openSearchA:false,
				openSearchF:false,
				showDetail:false,
				showQueueSucc:false,
				showLineBox2:false,
				spotIndex:0,
				foodIndex:0,
				hotelIndex:0,
				popType:0,
				showJQDetail:0,
				showAll:false,
				pointId:0,
				mapHeight:global.winHeight-110,
				x: -146,
				y: -103,
				old: {
					x: -146,
					y: -103
				},
				spotPos:[
					{
						choose:false,
						name:'景点1',
						left:580,
						top:700,
						x:-146,
						y:-103
					},
					{
						choose:false,
						name:'景点2',
						left:350,
						top:620,
						x:-40,
						y:-112
					},
					{
						choose:false,
						name:'景点3',
						left:700,
						top:400,
						x:-214,
						y:-15
					},
					{
						choose:false,
						name:'景点4',
						left:900, 
						top:450,
						x:-312,
						y:-50
					}
				],
				lineConfig:{
					list:[],
				},
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:true, //显示页面title
						hasMenu:false,
						pageId:'',
					},
					left:{
						showPos:false,
						img:'/static/pos-home.png' , //左侧图标
						text:'风景区', //左侧文字
					},
					mid:{
						title:'游乐园' ,//页面title
						hasSearchMid:false ,//显示中间搜索框,
						showMsg:true,
						showDownload:true,
					},
				},
				posData:[
					{
						name:'卫生间',
						img:'/static/map/wc.png',
						imgN:'/static/map/wc-n.png',
						id:3,
						pos:[{y:160,x:220},
							{y:20,x:560},
							{y:560,x:380},
							{y:1000,x:1160},
							{y:520,x:900}]
					},
					{
						name:'出口',
						id:7,
						img:'/static/map/exit.png',
						imgN:'/static/map/exit-n.png',
						pos:[{y:1180,x:260},
							{y:60,x:708}]
					},
					{
						name:'餐饮',
						id:4,
						img:'/static/map/food.png',
						imgN:'/static/map/food-n.png',
						pos:[{y:420,x:350},
							{y:20,x:600},
							{y:500,x:500},
							{y:1000,x:1000}]
					},
					{
						name:'住宿',
						id:5,
						img:'/static/map/bed.png',
						imgN:'/static/map/bed-n.png',
						pos:[{y:420,x:350},
							{y:20,x:600},
							{y:500,x:500},
							{y:1000,x:1000}]
					},
					{
						name:'停车场',
						id:8,
						img:'/static/map/stop.png',
						imgN:'/static/map/stop-n.png',
						pos:[{y:420,x:350},
							{y:20,x:600},
							{y:1000,x:1000}]
					},
					{
						name:'电商',
						id:9,
						img:'/static/map/shop.png',
						imgN:'/static/map/shop-n.png',
						pos:[{y:420,x:350},
							{y:20,x:600},
							{y:1000,x:1000}]
					},
					
					{
						name:'游客中心',
						id:6,
						img:'/static/map/ykzx.png',
						imgN:'/static/map/ykzx-n.png',
						pos:[{y:1180,x:260},
							{y:60,x:708}]
					},
				],
				myPos:{y:640,x:300},
				
			 }
		 },
		 methods: {
			tap: function() {
				this.x = this.old.x
				this.y = this.old.y
				this.$nextTick(function() {
					this.x = this.spotPos[this.spotIndex].x
					this.y = this.spotPos[this.spotIndex].y
				})
			},
			tapH: function() {
				this.x = this.old.x
				this.y = this.old.y
				this.$nextTick(function() {
					this.x = this.spotPos[this.hotelIndex].x
					this.y = this.spotPos[this.hotelIndex].y
				})
			},
			tapF: function() {
				this.x = this.old.x
				this.y = this.old.y
				this.$nextTick(function() {
					this.x = this.spotPos[this.foodIndex].x
					this.y = this.spotPos[this.foodIndex].y
				})
			},
			onChange: function(e) {
				this.old.x = e.detail.x
				this.old.y = e.detail.y
			},
			choosePoint(id){
				if(id==999){
					this.pointId = null
				}else{
					this.showAll = false
					this.pointId = id
				}
				
			},
			spotClick(index){
				this.showSpot = true
				this.spotIndex = index
			},
			showLine(){
				this.showLineBox = true
				this.showLineBox2 = false
			},
			closeLineBox(){
				this.showLineBox = false
			},
			openQueue(){
				this.showQueue = true
			},
			closeQueue(){
				this.showQueue = false
			},
			addLine(item){
				this.lineConfig.list.push(item.name)
				item.choose = true
				console.log(this.lineConfig.list)
			},
			minusLine(item){
				item.choose = false
				var ArrIndex = 0
				var list = this.lineConfig.list
				list.forEach((item2,index)=>{
					console.log(index)
					console.log(item.name+item2)
					if(item.name==item2){
						ArrIndex = index
						console.log(11111)
					}
				})
				list = list.splice(ArrIndex,1)
				
			},
			showQS(){
				this.closeQueue()
				this.showQueueSucc = true;
			},
			closeQS(){
				this.showQueueSucc = false
			},
			openSpotSearch(){
				this.openSearch = !this.openSearch;
			},
			closeSpotSearch(){
				this.openSearch = false
			},
			openSpotSearchH(){
				this.openSearchH = !this.openSearchH;
			},
			closeMsg(){
				this.showMsg = false
			},
			closeSpotSearchH(){
				this.openSearchH = false
			},
			openSpotSearchS(){
				this.bottomIndex = 2
				this.openSearchS = !this.openSearchS;
			},
			closeSpotSearchS(){
				this.openSearchS = false
			},
			openSpotSearchO(){
				this.openSearchO = !this.openSearchO;
			},
			closeSpotSearchO(){
				this.openSearchO = false
			},
			openSpotSearchA(){
				this.openSearchA = !this.openSearchA;
			},
			closeSpotSearchA(){
				this.openSearchA = false
			},
			openrealN(){
				this.openrealN = !this.openrealN;
			},
			closeSpotrealN(){
				this.openrealN = false
			},
			openSpotSearchF(){
				this.openSearchF = !this.openSearchF;
			},
			closeSpotSearchF(){
				this.openSearchF = false
			},
			openDetail(){
				// uni.navigateTo({
				// 	url:'/pages/home/scenicSpot/map/shenqiDetail'
				// })
				this.showDetail = true
				this.openSearch = false
			},
			closeDetail(){
				this.showDetail = false
			},
			openJQDetail(){
				// uni.navigateTo({
				// 	url:'/pages/home/scenicSpot/map/shenqiDetail'
				// })
				this.popType=1
				this.showJQDetail = true
				this.openSearch = false
			},
			closeJQDetail(){
				this.popType=0
				this.showJQDetail = false
			},
			openLine(){
				this.showLineBox2 = !this.showLineBox2
				this.showLineBox = false
			},
			closeLine(){
				this.showLineBox2 = false
			},
			clearPops(){
				this.showSpot = false
			},
			openZyMask(){
				this.showZylxMask = true
				this.showLineBox = false
				this.showLineBox2 = false
			},
			closeZyMask(){
				this.showLinePointBox = true
				this.showZylxMask = false
				this.showLineBox = false
				this.showLineBox2 = false
			},
			openLinePointBox(){
				this.showLinePointBox = true
			},
			closeLinePointBox(){
				this.showLinePointBox = false
			}
			
		},
		components: {
			SpotBottom,
			SearchSpot,
			SearchScenery,
			SearchOnline,
			SearchAudio,
			TMap,
			ShenqiDetail,
			TouristCenter,
			SpotQueueSucc,
			SpotQueue,
			realName,
			ShenqiMask,
			JingquDetail,
			MapMsg,
			SearchHotel,
			SearchFood,
			LinePointBox
		},
		onReady: function () {
			uni.getSystemInfo({
			　　success: function(res) { // res - 各种参数
			　　   console.log(res.windowHeight); // 屏幕的宽度 
			　　    let info = uni.createSelectorQuery().select(".map");
			　　　  　info.boundingClientRect(function(data) { //data - 各种参数
					  data.height = res.windowHeight
			　　　  　console.log(data.height)  // 获取元素宽度
			　　    }).exec()
				   }
			});
		},
		onLoad(options) {
            console.log(options.showAll)
			this.showAll = options.showAll
         },
	 }
	
</script>

	
<style scoped>
	.map{
		width: 750upx;
		height: calc(100vh - 250upx);
		background: #0075EE;
		overflow: hidden;
		top: 140upx; 
		position: absolute;
	}
	.map image{
		width: 1400upx;
		height: 1400upx;
		position: absolute;
	}
	/* 定位 */
	.points{
		width: 1400upx;
		height: 1400upx;
		position: absolute;
	}
	.points-area{
		width: 1400upx;
		height: 1400upx;
		position: absolute;
	}
	.points-item{
		width: 91upx;
		height: 90upx;
		position: absolute;
		vertical-align: middle;
		/* text-align: center; */
	}
	
	.points-item image{
		width: 71upx;
		height: 82upx;
		margin-left: 10upx;
		margin-right: 10upx;
		vertical-align: middle;
	}
	.point-tip{
		width: 140upx;
		height: 42upx;
		background: #FFFFFF;
		position: absolute;
		border-radius: 10upx;
	}
	.point-tip-near{
		width: 524upx;
		height: 111upx;
		background: #FFFFFF;
		position: absolute;
		z-index: 12;
		border-radius: 10upx;
	}
	.point-tip text{
		width: 524upx;
		display: block;
		height: 42upx;
		line-height: 42upx;
		font-size: 24upx;
		color: #666666;
		text-align: center;
	}
	/* .point-tip-near text{
		
		display: block;
		height: 42upx;
		color: #666666;
		line-height: 42upx;
		font-size: 24upx;
		margin-left: 20upx;
		text-align: left;
	} */
	.pop-img{
		width: 38upx !important;
		height: 40upx !important;
		float: left;
		margin-top: 35upx;
		left: 27upx;
	}
	.pop-title{
		font-size: 32upx !important;
		width: 100upx;
		display: block;
		height: 111upx;
		margin-left: 100upx;
		line-height: 98upx;
	}
	.near-text{
		width: 250upx !important;
		display: block;
		height: 42upx;
		margin-top: 10upx;
		margin-left: 80upx;
		color: #000000 !important;
		line-height: 42upx;
		position: absolute;
		top: 40upx;
		left:130upx;
		font-size: 26upx !important;;
		text-align: left;
		float: left;
	}
	.pop-btn{
		width: 146upx;
		height: 40upx;
		right: 30upx;
		top: 40upx;
		position: absolute;
		color: #FFFFFF;
		font-size: 28upx;
		text-align: center;
		line-height: 40upx;
		border-radius: 30upx;
		background: -webkit-linear-gradient(left, #54B1FF,#93CAFB);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#93CAFB);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#93CAFB);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#93CAFB);
		/* 标准的语法 */
	}
	.pop-checking{
		width: 250upx !important;
		display: block;
		height: 42upx;
		margin-top: 10upx;
		margin-left: 80upx;
		color: #EB3D14 !important;
		line-height: 42upx;
		position: absolute;
		top: 0;
		left:130upx;
		font-size: 26upx !important;;
		text-align: left;
		float: left;
	}
	/* .nearWC{
		display: flex;
		flex-direction: row;
		justify-content:space-between ;
	}
	.nearWC image{
		width: 38upx;
		height: 40upx;
		margin-left: 27upx;
		margin-top: 40upx;
	}
	.wctype{
		display: flex;
		flex-direction:column;
		justify-content:center ;
		margin-top: 10upx;
	} */
	/* .btn{
		width: 146upx;
		height: 40upx;
		border-radius: 40upx;
		background: -webkit-linear-gradient(left, rgba(147,202,251,1.00),rgba(84,177,255,1.00));
		background: -o-linear-gradient(right, rgba(147,202,251,1.00),rgba(84,177,255,1.00));
		background: -moz-linear-gradient(right, rgba(147,202,251,1.00),rgba(84,177,255,1.00));
		background: linear-gradient(to right, rgba(147,202,251,1.00),rgba(84,177,255,1.00));
		color: #FFFFFF;
		text-align: center;
		line-height: 39upx;
		font-size: 22upx;
		float: right;
		right: 41upx;
		position: absolute;
		bottom: 20upx;
	} */
	
	.sanjiao{
		width: 0upx;
		height: 0upx;
		margin-right: 25%;
		border: 14upx solid transparent;
		border-top-color: #FFFFFF;
		margin-left: 56upx;
		position: absolute;
		bottom: -26upx;
	}
	.sanjiao-bottom{
		width: 0upx;
		height: 0upx;
		margin-right: 25%;
		border: 14upx solid transparent;
		border-bottom-color: #FFFFFF;
		margin-left: 56upx;
		position: absolute;
		top: -26upx;
	}
	.tip-top{
		top: -60upx;
		left: -25upx;
	}
	.tip-bottom{
		bottom: -60upx ;
		left: -25upx;
	}
	.near-top{
		top: -130upx;
		left: -25upx;
	}
	.near-bottom{
		bottom: -130upx;
		left: -25upx;
	}
	/* 我的位置 */
	.myPos{
		width: 75upx !important;
		height: 75upx !important;
		position: absolute;
	}
	
	.spot-btn-area{
		width: 1400upx;
		height: 1400upx;
		position: absolute;
	}
	.spot-area{
		width: 524upx;
		height: auto;
		display: table;
		background: #FFFFFF;
		position: absolute;
		left: -160upx;
		border-radius: 20upx;
		top:-360upx;
		z-index: 10;
	}
	.spot-area-close{
		position: absolute;
		right: -30upx;
		padding: 20upx;
		top: -30upx;
		width: 30upx !important;
		height: 30upx !important;
	}
	
	.spot-area-headIcon{
		width: 136upx !important;
		height: 136upx !important;
		border-radius: 50%;
		margin-left: 24upx;
		margin-top: 30upx;
		float: left;
	}
	.spot-right{
		width: 320upx;
		margin-right: 16upx;
		float: right;
		height: auto;
		display: table;
		margin-top: 15upx;
	}
	.spot-name{
		width: 100upx;
		height: 40upx;
		font-size: 30upx;
		float: left;
	}
	.spot-det{
		height: 40upx;
		float: right;
		width: 100upx;
		font-size: 24upx;
		color: #999999;
		line-height: 40upx;
	}
	.spot-det-image{
		width: 20upx !important;
		height: 20upx !important;
		float: right !important;
		margin-left: 10upx;
		right: 30upx;
		margin-top: 12upx;
	}
	.spot-recommend{
		width: 310upx;
		height: 70upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: rgba(102,102,102,1);
		line-height: 36upx;
		margin-top: 50upx;
		overflow: hidden;
	}
	.line{
		width: 100%;
		height: 26upx;
		display: block;
		font-size: 26upx;
		color: rgba(0,139,255,1.00);
		margin-top: 13upx;
	}
	.line2{
		width: 100%;
		height: 26upx;
		display: block;
		font-size: 26upx;
		color: rgba(255,48,0,1.00);
		margin-top: 13upx;
	}
	.spot-btns{
		width: 100%;
		height: 60upx;
		margin-top: 15upx;
	}
	.spot-btn{
		width: 125upx;
		height: 40upx;
		float: right;
		margin:14upx 14upx ;
		background: -webkit-linear-gradient(left, rgba(147,202,251,1.00),rgba(84,177,255,1.00));
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, rgba(147,202,251,1.00),rgba(84,177,255,1.00));
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, rgba(147,202,251,1.00),rgba(84,177,255,1.00));
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, rgba(147,202,251,1.00),rgba(84,177,255,1.00));
		/* 标准的语法 */
		font-size: 22upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 39upx;
		border-radius: 35upx;
	}
	.spot-btn1{
		width: 140upx;
		height: 40upx;
		float: right;
		margin:14upx 14upx ;
		background: -webkit-linear-gradient(left, rgba(147,202,251,1.00),rgba(84,177,255,1.00));
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, rgba(147,202,251,1.00),rgba(84,177,255,1.00));
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, rgba(147,202,251,1.00),rgba(84,177,255,1.00));
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, rgba(147,202,251,1.00),rgba(84,177,255,1.00));
		/* 标准的语法 */
		font-size: 22upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 39upx;
		border-radius: 35upx;
	}
	.way-box{
		width: 570upx;
		height: 340upx;
		background: rgba(0,0,0,0.70);
		border-radius: 20upx;
		position: absolute;
		left:-185upx;
		top: -40upx;
		z-index: 20;
	}
	.way-box-2{
		width: 570upx;
		height: 340upx;
		background: rgba(0,0,0,0.70);
		border-radius: 20upx;
		position: fixed;
		bottom: 140upx;
		left: 70upx;
		z-index: 20;
	}
	.way-box-2 .sanjiao{
		border: 14upx solid transparent;
		border-top-color: rgba(0,0,0,0.8);
		margin-left: 120upx !important;
	}
	.way-box .sanjiao-bottom{
		border: 14upx solid transparent;
		border-bottom-color: rgba(0,0,0,0.8);
		margin-left: 300upx !important;
	}
	.way-box-head{
		width: 100%;
		height: 60upx;
	}
	.close-img{
		width: 60upx;
		height: 60upx;
		float: right;
	}
	.close-img image{
		width: 30upx;
		height: 30upx;
		margin: 15upx;
	}
	.way-item{
		width: 100%;
		height: 66upx;
		margin-top: 37upx;
		display: flex;
		flex-direction: row;
	}
	.way-btn{
		width: 203upx;
		height: 60upx;
		border: #FFFFFF solid 1upx;
		border-radius: 30upx;
		text-align: center;
		line-height: 60upx;
		color: #FFFFFF;
		background: rgba(195, 255, 252, 0.18);
		font-size: 30upx;
		margin-left: 26upx;
	}
	.way-des{
		width: 270upx;
		height: 60upx;
		margin-left: 35upx;
		line-height: 60upx;
		text-align: left;
		font-size: 24upx;
		color: #FFFFFF;
	}
	.way-line-img{
		width: 40upx !important;
		height: 41upx !important;
		margin-top: 10upx;
		position: absolute;
		right: 22upx;
		border: #FFFFFF dashed 1upx;
	}
</style>
